<template>
	<gracePage :customHeader="false">
		<!-- 页面主体 -->
		<view slot="gBody">
			<!-- 页面內容 -->
			<view style="width: 750rpx;height: 450rpx;background:rgba(255,255l,255,1)">
				<view class="grace-columns" style="position: absolute;top: 330rpx;left: 32rpx;">
					<text style="font-size:44rpx;font-weight:bold;color:rgba(218,28,30,1);">￥{{ selling_price }}</text>
					<text
						style="font-size:24rpx;font-weight:bold;text-decoration:line-through;color:rgba(204,204,204,1);">原价{{price_s}}</text>
				</view>
				<image :src="banners" style="position: absolute;top: 23rpx;left: 283rpx; width: 400rpx;height: 400rpx;">
				</image>

			</view>
			<view  v-for="(item,index) in maifangshi" @tap="get_pay_type(index,item.id)" class="grace-flex grace-flex-vcenter" style="width:750rpx;height:100rpx;background:rgba(255,255,255,1);margin-top: 5rpx;">
				<view class="grace-rows" >
					<image :src="item.img" style="margin-left: 31rpx; width: 70rpx;height: 70rpx;"></image>
					<text style="margin-left: 31rpx; font-size:26rpx;font-weight:400;color:rgba(42,42,42,1);line-height:30px;">{{item.name}}</text>
					<text v-show="item.name == '金币支付'" style="position: absolute;left: 260rpx;line-height: 60rpx; font-size:22rpx;font-weight:400;color:rgba(153,153,153,1);">剩余积分：{{ yue }}</text>
					<image :src="item.is_mo==1?xuanzong:weixuanzong" style="position: absolute; width: 32rpx;height: 32rpx;right: 31rpx;margin-top: 34rpx;"></image>
					
				</view>
			</view>
			<button @tap="up_vip()" :style="{background:button_color}"
				class="button_color">立即购买</button>
		</view>
	</gracePage>
</template>

<script>
	import gracePage from "../../graceUI/components/gracePage.vue";
	export default {
		data() {
			return {
				button_color:'',//按钮颜色
				pay_tape: 0,
				id: '', // 抵用券id
				selling_price: "0", //实际售价
				price_s: 0, //原价
				banners: '', //显示的图片
				yue: "0", //客户余额
				is_wx: true,
				maifangshi: [], // 支付方式
				zf_id: '', // 支付方式id
				xuanzong: '../../static/rise_vip_xuanzhong.png',
				weixuanzong: '../../static/rise_vip_weixuanzhong.png',
				page_type: '', // app页面判断
			}
		},
		onShow() {
			this.button_color = uni.getStorageSync('button_color');
		},
		onLoad: function(opt) {
			this.id = opt.coupons_id;
			this.get_info_data();
			
			// #ifdef APP-PLUS
				this.page_type = 'app'
			// #endif
			
			// #ifdef H5
			var system = {};
			var p = navigator.platform;
			system.win = p.indexOf("Win") == 0;
			system.mac = p.indexOf("Mac") == 0;
			system.x11 = (p == "X11") || (p.indexOf("Linux") == 0);
			if (system.win || system.mac || system.xll) { //如果是电脑跳转到
				this.page_type = 'js'
				console.log(this.page_type);
			} else { //如果是手机,跳转到
				this.page_type = 'h5'
				console.log(this.page_type);
			}
			var ua = navigator.userAgent.toLowerCase();
			// alert(ua)  
			if (ua.search(/MicroMessenger/i) > -1) {
				this.is_wx = false;
			} else if (ua.search(/mqqbrowser/i) > -1) {
				this.is_wx = true;
			} else {
				this.is_wx = true;
			}
			// #endif
		},
		methods: {
			// 获取购买抵用券的详情数据
			get_info_data() {
				var vm = this;
				vm.myPost(
					'api/deductioncoupons/get_coupons_info', {
						coupons_id: vm.id
					},
					function(res) {
						console.log(res)
						vm.yue = res.data.gold_coin;
						vm.banners = res.data.img;
						vm.price_s = res.data.user_price;
						vm.selling_price = res.data.vip_price;
						vm.maifangshi = res.data.channel
					}
				)
			},
			// 选择支付方式
			get_pay_type(type,id) {
				this.zf_id = id
				var list_shuju = this.maifangshi
				var newinfo = []
				this.each(list_shuju,function(v,i){
					if (v.id == list_shuju[type].id) {
						v.is_mo = 1
					} else {
						v.is_mo = 0
					}
					newinfo.push(v);
				})
				this.maifangshi = newinfo
				
			},
			// 立即购买
			up_vip() {
				vm.myPost(
					'api/deductioncoupons/purchase_coupons', {
						coupons_id: vm.id,
						page_type:	vm.page_type,
						type_id: vm.zf_id
					},
					function(res) {
						console.log(res);
						if (vm.zf_id === 3) {
							vm.get_info_data();
							uni.showToast({
								title: res.msg,
								icon: 'none'
							})
							setTimeout(function(){
								uni.navigateTo({
									url: '/pages/index/card_coupon2'
								})
							},1000)
						} else {
							// #ifdef APP-PLUS
							var provider = '';
							if (vm.zf_id === 1) {
								provider = 'wxpay';
							} else if (vm.zf_id === 2) {
								provider = 'alipay';
							}
							// 支付数据
							uni.requestPayment({
								provider: provider, // wxpay、alipay
								orderInfo: res.data, //微信、支付宝订单数据
								success: function(res) {
									vm.msg_show('购买成功');
									console.log('success:' + JSON.stringify(res));
								},
								fail: function(err) {
									console.log('fail:' + JSON.stringify(err));
								}
							});
							// #endif

							// #ifdef H5
							// var jweixin = require('https://res2.wx.qq.com/open/js/jweixin-1.4.0.js')

							if (type === '微信') {
								function onBridgeReady() {
									WeixinJSBridge.invoke(
										'getBrandWCPayRequest', res.data,
										function(res) {

											if (res.err_msg == "get_brand_wcpay_request:ok") {
												vm.msg_show('购买成功');
												// window.location.href="https://xs.scthzy.com/user/index/index.html";
												// 使用以上方式判断前端返回,微信团队郑重提示：
												//res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
											}
										});
								}
								if (typeof WeixinJSBridge == "undefined") {
									if (document.addEventListener) {
										document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
									} else if (document.attachEvent) {
										document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
										document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
									}
								} else {
									onBridgeReady();
								}

								// wx.config({$payconfig});
								wx.ready(function() {
									wx.chooseWXPay(res.data);
								});
								wx.error(function(res) {
									alert(res)
								});



							} else if (type === '支付宝') {
								const form = res.data;
								// deleteExisting('#alipay'); // 判断之前是否插入过#alipay
								const div = document.createElement('div');
								div.id = 'alipay';
								div.innerHTML = form;
								document.body.appendChild(div);
								document.querySelector('#alipay').children[0].submit(); // 执行后会唤起支付宝

							}

							// #endif

						}


					}
				)
			},


		},
		components: {
			gracePage
		}
	}
</script>

<style>
	.button_color{
		width:687rpx;
		height:90rpx;
		/* background:rgba(218,28,30,1); */
		border-radius:6rpx;
		font-size:32rpx;
		font-weight:400;
		color:rgba(255,255,255,1);
		margin-top: 250rpx;
		line-height: 90rpx;
	}
</style>


<!-- .grace-flex // 声明 flex
.grace-rows // flex 横向
.grace-columns  //flex 竖向
.grace-wrap //flex 自动换行
.grace-nowrap //flex 横向不换行
.grace-space-between //flex 横向两端对齐
.grace-flex-end //flex 横向右对齐
.grace-flex-center  //flex 横向居中
.grace-flex-top  //flex 垂直顶端对齐
.grace-flex-vcenter //flex 垂直居中对齐
.grace-flex-bottom //flex 垂直底部对齐
.grace-no-scale //元素不缩放 -->
